<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import setting from '@/assets/setting.svg'
import {batchRename} from '@/api/reqApi.js'
const BatchForm = ref({
  prefix: '',
  path: '',
  targetExt:'',
  excludeExt:""
})

const rules = {
  path: [
    { required: true, message: '请填写文件目录', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value) {
          // 检查路径是否为空格
          if (!value.trim()) {
            callback(new Error('文件目录不能为空格'));
          } else {
            callback(); // 验证通过
          }
        } else {
          callback(); // 字段为空时也需要调用 callback
        }
      },
      trigger: 'blur'
    }
  ],
  targetExt: [
    { required: true, message: '请填写目标后缀', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value) {
          // 检查是否为空格
          if (!value.trim()) {
            callback(new Error('名称后缀不能为空格'));
          } else {
            const startsWith = value.startsWith('.');
            if (!startsWith) {
              callback(new Error('后缀一定要 . 开头'));
            } else {
              callback(); // 验证通过
            }
          }
        } else {
          callback(); // 字段为空时也需要调用 callback
        }
      },
      trigger: 'blur'
    }
  ],
}

const formRef = ref()

const updating = ref(false)

const update = async () => {
  try{
    const validate = await formRef.value.validate()
    if (!validate){
      ElMessage.error('请填写完整信息')
      return
    }
    updating.value = true
    const formData = BatchForm.value
    let reqData = {
      path: formData.path.trim(),
      prefix: BatchForm.value.prefix.trim(),
      targetExt: BatchForm.value.targetExt.trim(),
      excludeExt: BatchForm.value.excludeExt.trim()
    }
    const res = await batchRename(reqData)
    ElMessage.success(res.msg+ '个' +res.data + '文件')
  }catch (e){
    console.log(e)
  }
  finally {
    updating.value = false
  }
}

</script>

<template>
  <div class="page">
    <div class="bg">
      <img :src="setting" style="width: 50px;height: 50px" />
      <p class="title">批量修改文件名神器</p>
      <p>请谨慎操作，勿修改重要的系统路径否则出现问题概不负责</p>
    </div>
    <div class="margin">
      <div class="form-box">
        <el-card>
          <el-form
            style="max-width: 600px"
            :model="BatchForm"
            :rules="rules"
            ref="formRef"
            label-width="auto"
            label-position="top"
          >
            <el-form-item label="文件目录" prop="path">
              <el-input v-model="BatchForm.path" placeholder="请使用安全目录，勿使用系统目录等重要目录" clearable />
            </el-form-item>
            <el-form-item label="名称前缀">
              <el-input v-model="BatchForm.prefix" placeholder="文件名称前缀,如货号、编号等" clearable />
            </el-form-item>
            <el-form-item label="指定后缀" prop="targetExt">
              <el-input v-model="BatchForm.targetExt" placeholder="修改成指定的文件后缀,如png,jpg等,不填不修改" clearable />
            </el-form-item>
            <el-form-item label="排除后缀">
              <el-input v-model="BatchForm.excludeExt" placeholder="某些后缀不需要修改，填写将其过滤" clearable />
            </el-form-item>
            <el-form-item label="">
              <el-button type="success" :loading="updating" @click="update">开始修改</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page {
  min-height: 100vh;
  .bg{
    background-image: linear-gradient(135deg, #07c160,#07b65b, #06ae57);
    height: 400px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .title{
      color: white;
      font-size: 32px;
    }
  }
  .margin{
    margin: 2% 20%;
  }
}
</style>